<script setup lang="ts">
import barEcharts from '@/views/echarts/components/bar-echarts.vue'

const xLabels = ref(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])
const values = ref([120, 200, 150, 80, 70, 110, 130])
</script>

<template>
  <h1 class="a">Helloss <span class="a-b">App!</span></h1>
  <barEcharts :xLabels="xLabels" :values="values" />
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link class="link-style" to="/base/home">
      Go to base feature
    </router-link>
    <router-link class="link-style" to="/example/home">
      Go to example feature
    </router-link>
  </p>

  <router-view></router-view>
</template>
<style scoped lang="scss">
/* sass,scss rules */
.a {
  color: aqua;
  &-b {
    color: aquamarine;
  }
}
.link-style {
  margin: 0 10px;
}
</style>
